<template>
  <el-input
    v-bind="$attrs"
    v-model="state.paramVal"
    :type="type"
    clearable
    :placeholder="
      (typeof $attrs.disabled !== 'undefined' && $attrs.disabled !== false) ||
      state.formView
        ? ''
        : $attrs.placeholder
          ? $attrs.placeholder
          : `请输入${label}`
    "
    @keyup.enter.native="$emit('emitEnter')"
    :disabled="isValue($attrs.disabled) ? $attrs.disabled : state.formView"
    @input="handleInput"
    @keypress="handleKeyPress"
    @focusout="handleFocusOut"
    :title="state.paramVal"
  >
    <template v-if="$slots.prefix" #prefix>
      <slot name="prefix" />
    </template>
    <template v-if="$slots.suffix" #suffix>
      <slot name="suffix" />
    </template>
    <template v-if="$slots.prepend" #prepend>
      <slot name="prepend" />
    </template>
    <template v-if="$slots.append" #append>
      <slot name="append" />
    </template>
  </el-input>
</template>

<script setup lang="ts">
import { reactive, watch, inject } from 'vue'
import { isValue } from '@/utils/czr-util'
const emit = defineEmits(['emitParam'])
const props = defineProps({
  param: {},
  label: {},
  type: {
    type: String,
    default: 'text',
    validator(val: string) {
      return ['text', 'textarea', 'password'].includes(val)
    },
  },
  max: { default: null, type: Number },
  min: { default: null, type: Number },
  decimal: { default: 0, type: Number },
})
const state = reactive({
  paramVal: <any>props.param,
  formView: inject('form-view', false),
})
watch(
  () => state.paramVal,
  (n) => {
    emit('emitParam', n)
  },
)
watch(
  () => props.param,
  (n) => {
    state.paramVal = n
  },
)
const handleInput = () => {
  const handleReg = (key) => {
    if (props.decimal === 0) {
      key = String(key).replace(/\D/g, '')
    } else {
      const pattern = new RegExp('(\\.\\d{' + props.decimal + '})\\d*')
      key = String(key)
        .replace(/\./g, (match, index) => {
          return index === key.indexOf('.') ? match : ''
        })
        .replace(/^(\d+)\.(\d+)|[^0-9.]/g, (match, group1, group2) => {
          if (group1 && group2) {
            return group1 + '.' + group2
          } else {
            return ''
          }
        })
        .replace(pattern, '$1')
    }
    return key
  }
  if (String(state.paramVal).startsWith('-')) {
    state.paramVal = '-' + handleReg(state.paramVal)
  } else {
    state.paramVal = handleReg(state.paramVal)
  }
  if (isValue(state.paramVal)) {
    if (isValue(props.max) && Number(state.paramVal) > props.max) {
      state.paramVal = props.max
    }
    if (isValue(props.min) && Number(state.paramVal) < props.min) {
      state.paramVal = props.min
    }
  }
}
const handleKeyPress = (event) => {
  const keyCode = event.keyCode || event.which
  if (
    keyCode !== 8 &&
    keyCode !== 46 &&
    keyCode !== 45 &&
    (keyCode < 48 || keyCode > 57)
  ) {
    event.preventDefault()
  }
}
const handleFocusOut = () => {
  if (state.paramVal === '-') {
    state.paramVal = ''
  } else if (isValue(state.paramVal)) {
    state.paramVal = Number(state.paramVal)
  }
}
</script>

<style scoped lang="scss"></style>
